<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>个人信息</title>
	<!-- 引入Tailwind CSS -->
	<script src="https://cdn.tailwindcss.com"></script>
	<!-- 引入Font Awesome -->
	<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">

	<!-- 配置Tailwind自定义颜色 -->
	<script>
		tailwind.config = {
			theme: {
				extend: {
					colors: {
						primary: '#e0f2fe',      // 淡蓝色背景
						secondary: '#bae6fd',    // 稍深的淡蓝色
						accent: '#7dd3fc',       // 强调色
						dark: '#0ea5e9',         // 深蓝色用于按钮和重点
					},
					fontFamily: {
						sans: ['Inter', 'system-ui', 'sans-serif'],
					},
				}
			}
		}
	</script>

	<!-- 自定义工具类 -->
	<style type="text/tailwindcss">
		@layer utilities {
			.content-auto {
				content-visibility: auto;
			}
			.form-input-focus {
				@apply focus:ring-2 focus:ring-dark focus:border-dark focus:outline-none;
			}
			.transition-smooth {
				@apply transition-all duration-300 ease-in-out;
			}
		}
	</style>

	<style>
		/* 全局样式 */
		body {
			font-family: 'Pacifico', cursive;
			background-color: #f0f9ff;
			background-image:
					radial-gradient(#bae6fd 0.5px, transparent 0.5px),
					radial-gradient(#bae6fd 0.5px, #f0f9ff 0.5px);
			background-size: 20px 20px;
			background-position: 0 0, 10px 10px;
		}

		/* 表单元素动画 */
		input[type="text"],
		input[type="email"],
		input[type="date"] {
			transition: all 0.3s ease;
		}

		/* 按钮悬停效果 */
		.submit-btn {
			position: relative;
			overflow: hidden;
		}

		.submit-btn:after {
			content: '';
			position: absolute;
			top: 50%;
			left: 50%;
			width: 5px;
			height: 5px;
			background: rgba(255, 255, 255, 0.5);
			border-radius: 50%;
			transform: scale(1, 1) translate(-50%, -50%);
			transform-origin: 50% 50%;
		}

		@keyframes ripple {
			0% {
				transform: scale(0, 0);
				opacity: 1;
			}
			100% {
				transform: scale(20, 20);
				opacity: 0;
			}
		}

		.submit-btn:focus:not(:active)::after {
			animation: ripple 0.6s ease-out;
		}
	</style>
</head>
<body class="min-h-screen font-sans">
<div class="container mx-auto px-4 py-8 max-w-4xl">
	<!-- 页面标题 -->
	<h1 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold text-center text-gray-700 mb-8 relative inline-block left-1/2 transform -translate-x-1/2">
		<span class="bg-clip-text text-transparent bg-gradient-to-r from-dark to-accent">个人信息</span>
		<div class="h-1 w-24 bg-accent rounded-full mx-auto mt-2"></div>
	</h1>

	<!-- 导航菜单 -->
	<div class="bg-white rounded-xl shadow-md p-4 mb-8 transform hover:shadow-lg transition-smooth">
		<ul class="flex justify-center space-x-6">
			<li>
				<a href="/admin/index" class="flex items-center text-gray-600 hover:text-dark transition-smooth">
					<i class="fa fa-home mr-2"></i> 首页
				</a>
			</li>
			<li>
				<a href="/admin/logout" class="flex items-center text-gray-600 hover:text-dark transition-smooth">
					<i class="fa fa-sign-out mr-2"></i> 安全退出
				</a>
			</li>
		</ul>
	</div>

	<!-- 表单卡片 -->
	<div class="bg-white rounded-xl shadow-lg p-6 md:p-8 max-w-md mx-auto transform hover:shadow-xl transition-smooth border-t-4 border-dark">
		<form action="/admin/execu_update" method="post" class="space-y-5">
			<input type="hidden" value="#(session.admin.adminId)" name="adminId" class="w-full">

			<!-- 账号 -->
			<div class="space-y-2">
				<label for="email" class="block text-sm font-medium text-gray-700 flex items-center">
					<i class="fa fa-envelope-o mr-2 text-dark"></i> 账号
				</label>
				<input type="email" id="email" value="#(session.admin.adminEmail)" name="adminEmail"
					   class="w-full px-4 py-2 border border-gray-300 rounded-lg form-input-focus bg-primary/50" />
			</div>

			<!-- 姓名 -->
			<div class="space-y-2">
				<label for="name" class="block text-sm font-medium text-gray-700 flex items-center" >
					<i class="fa fa-user-o mr-2 text-dark"></i> 姓名
				</label>
				<input type="text" id="name" value="#(session.admin.adminName)" name="adminName"
					   class="w-full px-4 py-2 border border-gray-300 rounded-lg form-input-focus bg-primary/50" />
			</div>

			<!-- 生日 -->
			<div class="space-y-2">
				<label for="birthday" class="block text-sm font-medium text-gray-700 flex items-center">
					<i class="fa fa-calendar-o mr-2 text-dark"></i> 生日
				</label>
				<input type="date" id="birthday" value="#date(session.admin.adminBir,'YYYY-MM-dd')" name="adminBir"
					   class="w-full px-4 py-2 border border-gray-300 rounded-lg form-input-focus bg-primary/50" />
			</div>

			<!-- 性别 -->
			<div class="space-y-2">
				<label class="block text-sm font-medium text-gray-700 flex items-center">
					<i class="fa fa-venus-mars mr-2 text-dark"></i> 性别
				</label>
				<div class="flex space-x-6 pt-1">
					<div class="flex items-center">
						<input type="radio" id="male" name="adminSex" value="1" #(session.admin.adminSex==1 ? "checked":'')
						class="w-4 h-4 text-dark focus:ring-dark border-gray-300" />
						<label for="male" class="ml-2 text-gray-700">男</label>
					</div>
					<div class="flex items-center">
						<input type="radio" id="female" name="adminSex" value="0" #(session.admin.adminSex==0 ? "checked":'')
						class="w-4 h-4 text-dark focus:ring-dark border-gray-300" />
						<label for="female" class="ml-2 text-gray-700">女</label>
					</div>
				</div>
			</div>

			<!-- 家庭住址 -->
			<div class="space-y-2">
				<label for="address" class="block text-sm font-medium text-gray-700 flex items-center">
					<i class="fa fa-map-marker mr-2 text-dark"></i> 家庭住址
				</label>
				<input type="text" id="address" value="#(session.admin.adminAddr)" name="adminAddr"
					   class="w-full px-4 py-2 border border-gray-300 rounded-lg form-input-focus bg-primary/50" />
			</div>

			<!-- 提交按钮 -->
			<div class="pt-2">
				<input type="submit" value="保存"
					   class="submit-btn w-full bg-dark hover:bg-dark/90 text-white font-medium py-3 px-4 rounded-lg transition-smooth flex items-center justify-center">
			</div>
		</form>
	</div>

	<!-- 页脚 -->
	<footer class="mt-12 text-center text-gray-500 text-sm">
		<p>© 2023 个人信息管理系统 | 保护您的隐私安全</p>
	</footer>
</div>

<!-- 简单的交互脚本 -->
<script>
	// 为表单添加提交动画效果
	document.querySelector('form').addEventListener('submit', function(e) {
		const submitBtn = this.querySelector('input[type="submit"]');
		const originalText = submitBtn.value;

		// 防止重复提交
		if (submitBtn.disabled) {
			e.preventDefault();
			return;
		}

		submitBtn.disabled = true;
		submitBtn.value = '保存中...';

		// 模拟提交延迟
		setTimeout(() => {
			submitBtn.value = '保存成功!';
			submitBtn.classList.add('bg-green-500');

			// 重置按钮状态
			setTimeout(() => {
				submitBtn.value = originalText;
				submitBtn.disabled = false;
				submitBtn.classList.remove('bg-green-500');
			}, 1500);
		}, 800);
	});
</script>
</body>
</html>
